<template>
	<view>
		<view>导航跳转(页面链接)的学习</view>
		<view>navigator声明式导航</view>
		<navigator url="../detail/index">有返回按钮跳转到常用组件的学习页</navigator>
		<view>---------------------</view>
		<!-- 设置open-type="redirect"把当前页面关闭后再跳转到目标页，目标页不能返回到上一个页面 -->
		<navigator url="../detail/index" open-type="redirect">无返回按钮跳转到常用组件的学习页</navigator>
		<view>---------------------</view>
		<!-- 通过?id=2传递参数，传递多个可沟通?id=2&age=18方式 -->
		<navigator url="../detail/index?id=2&age=18">跳转到常用组件的学习页并设置id为2和age为18</navigator>
		<view>---------------------</view>
		<!-- 设置open-type="switchTab"可跳转到tabBar导航栏的页面 -->
		<navigator url="../message/index" open-type="switchTab">跳转到信息页</navigator>

		<view>========================</view>
		<view>编程式导航</view>
		<button @click="navigateToDetail">有返回按钮跳转到常用组件的学习页</button>
		<view>---------------------</view>
		<button @click="redirectToDetail">无返回按钮跳转到常用组件的学习页</button>
		<view>---------------------</view>
		<button @click="toMessage">跳转到信息页</button>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		navigateToDetail() {
			// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
			uni.navigateTo({
				// 需要跳转的应用内页面路径 , 路径后可以带参数。
				// 参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
				// 如'path?key=value&key2=value2'，如果跳转的页面路径是tabBar页面则不能带参数
				url: '../detail/index',
				// 接口调用成功的回调函数
				success() {},
				// 接口调用失败的回调函数
				fail() {},
				// 接口调用结束的回调函数（调用成功、失败都会执行）
				complete() {}
			});
		},
		redirectToDetail() {
			// 关闭当前页面，跳转到应用内的某个页面
			uni.redirectTo({
				// 需要跳转的应用内页面路径 , 路径后可以带参数。
				// 参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
				// 如'path?key=value&key2=value2'，如果跳转的页面路径是tabBar页面则不能带参数
				url: '../detail/index',
				// 接口调用成功的回调函数
				success() {},
				// 接口调用失败的回调函数
				fail() {},
				// 接口调用结束的回调函数（调用成功、失败都会执行）
				complete() {}
			});
		},
		toMessage() {
			// 跳转到tabBar页面，并关闭其他所有非tabBar页面
			uni.switchTab({
				// 需要跳转的tabBar页面的路径（需在pages.json的tabBar字段定义的页面），路径后不能带参数
				url: '../message/index',
				// 接口调用成功的回调函数
				success() {},
				// 接口调用失败的回调函数
				fail() {},
				// 接口调用结束的回调函数（调用成功、失败都会执行）
				complete() {}
			});
		}
	},
	// 监听页面卸载
	onUnload() {
		console.log('跳转之前的页面已被关闭');
	}
};
</script>

<style></style>
